<template>
  <view class="collectPage">
    <view class="bgImg"></view>
    <view class="collectPage-main">
      <view class="collect-tab">
        <u-tabs :list="list1" lineColor="#134177" :activeStyle="{color: '#134177', fontWeight: 'bold',fontSize:'40rpx'}"
          :inactiveStyle="{color: '#134177',fontSize:'32rpx'}" @click="clickTab"></u-tabs>
      </view>
      <FootballPage v-show="current ===0"></FootballPage>
      <BasketballPage v-show="current === 1"></BasketballPage>
    </view>
    <!-- <tab-bar currentSelect="collectPage"></tab-bar> -->
  </view>
</template>

<script>
  import BasketballPage from './basketball.vue'
  import FootballPage from './football.vue'
  export default {
    name: 'CollectPage',
    components: {
      BasketballPage,
      FootballPage
    },
    data() {
      return {
        list1: [{
          name: '足球'
        }, {
          name: '篮球'
        }],
        current: 0
      };
    },
    methods: {
      clickTab(e) {
        this.current = e.index
        console.log(e, 111111);
      }
    },
  };
</script>

<style lang="less" scoped>
  /deep/ .uni-scroll-view-content {
    display: flex;
    justify-content: center;
  }

  .collectPage {
    padding-top: var(--status-bar-height);
    position: relative;

    .collectPage-main {
      box-sizing: border-box;
      padding: 0 30rpx;
      position: sticky;
      z-index: 1;

      .collect-banner {
        margin-top: 30rpx;
        width: 100%;
        height: 170rpx;
        border-radius: 10rpx;

        image {
          width: 690rpx;
          height: 170rpx;
        }
      }
    }
  }

  .bgImg {
    background: url(/static/img/collectPage/collect.png) no-repeat;
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 750rpx;
  }
</style>